<template>
  <div>
    <!-- 头部搜索导航 -->
    <div>
        <van-nav-bar fixed>
          <template v-slot:left>
            <img class="logo" src="./img/toutiao_logo.png" alt="">
          </template>
          <template #right>
            <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchPageFn"/>
          </template>
        </van-nav-bar>
    </div>
    <!-- tablan导航 -->
    <div class="nav">
        <!--
            van-tabs tab导航栏
            van-tab每个tab栏
            v-model 关联的激活项下标，绑定在组件上时是value属性(双向绑定)
            v-model 绑定在其他标签上是为input事件
            (重要)每个van-tab代表一个标签导航，中间夹着内容，对应的下属列表内容
            (重要)每个van-tab都对应独立的自己的ArticleList
            :name="obj.id"关联v-model="channelId"而非索引
         -->
        <van-tabs v-model="channelId" animated sticky offset-top="1.226667rem">
          <van-tab :title="obj.name"
           v-for="obj in userChannelList"
           :key="obj.id"
           :name="obj.id">
            <ArticleList :channelId="channelId"></ArticleList>
           </van-tab>
        </van-tabs>
        <van-icon name="plus" size='0.37333334rem' class="moreChannels" @click="plusClick"/>
    </div>

    <!-- 频道管理弹出层 -->
    <div>
      <van-popup v-model="show" get-container="body" class="channel_popup">
        <ChannelEdit
        :userList="userChannelList"
        :unCheckList="unCheckChannelList"
        @addChannelEV="addChannelFn"
        @removeChannelEV="removeChannelFn"
        @closeEV="closeFn"
        ref="editRef"
        v-model="channelId"/>
      </van-popup>
    </div>
  </div>
</template>

<script>
/*
  目标1、获取不同的文章列表，需要传递不同的频道ID
  想法：让van-tabs的v-model关联频道ID

  目标2、点击tab标签也@change触发，重新发送请求，拿到的新数据
  问题：每次切换tab拿到的数据都是新的
  即使使用keep-alive也没有用(防止组件被销毁，而组件没有销毁，只是在点击时切换了数据)
  解决方法：外面现在使用的是同一个数组切换数据(多个ArticleList用的同一个数组，换会影响别人)
  将文章列表的数据，请求，请求，数组分别放入ArticleList内部(自己请求自己的数据)
  父组件只复制传入当前激活的频道ID
*/
import { getUserChanneAPI, getAllChannelsAPI, updateChannelsAPI, deleteChannelsAPI } from '../../api/index'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'Home',
  data () {
    return {
      channelId: 0, // 激活频道id
      userChannelList: [], // 用户选择频道
      allChannelList: [], // 所有的频道
      articleList: [], // 文章列表
      show: false // 频道弹出层显示与隐藏
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  async created () {
    // 获取频道列表
    const res = await getUserChanneAPI()
    this.userChannelList = res.data.data.channels
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
    // console.log('aaa', res, this.userChannelList, res2)
    // console.log('bbb', this.allChannelList)

    // 获取文章列表
    // this.channelChange()
  },
  methods: {
    // 切换事件 ->获取数据
    // async channelChange () {
    //   const res2 = await getAllArticleList({
    //     channel_id: this.channelId,
    //     timestamp: (new Date()).getTime()
    //   })
    //   this.articleList = res2.data.data.results
    //   console.log(res2)
    // }
    plusClick () {
      this.show = true
    },
    // 更新频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      const res = await updateChannelsAPI({
        channels: this.userChannelList
      })
      console.log(res)
    },
    // 删除评到
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)

      // 方法一：把整个用户数组的更新，再覆盖式发送后台

      // 方法二：使用删除接口
      const res = await deleteChannelsAPI({
        channelId: channelObj.id
      })
      console.log(res)
    },
    closeFn () {
      this.show = false
      this.$refs.editRef.isEdit = false
    },
    moveSearchPageFn () {
      this.$router.push('/search')
    }
  },
  computed: {
    unCheckChannelList () {
      // 目标：把所有频道过滤用户频道
      // const newArr = this.allChannelList.filter(bigObj => {
      //   const index = this.userChannelList.findIndex(smallObj => {
      //     return smallObj.id === bigObj.id
      //   })
      //   // 如果找到了
      //   if (index > -1) {
      //     return false
      //   } else {
      //     return true
      //   }
      // })
      // return newArr
      return this.allChannelList.filter(bigObj => (this.userChannelList.findIndex(smallObj => smallObj.id === bigObj.id) === -1))
    }
  }
}
</script>

<style scoped>
 .logo{
    width: 130px;
    height: 40px;
 }
 .nav{
    padding-top: 46px;
    padding-bottom: 50px;
 }
 /* 设置小加号的样式 */
 .moreChannels{
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: #fff;
  top: 60px;
  right: 0px;
  z-index: 99;
 }
.channel_popup{
 width: 100vw;
 height: 100vh;
}
</style>
